<template>
  <n-modal class="go-modal-box" v-model:show="showRef" :mask-closable="true" @afterLeave="closeHandle">
    <n-card hoverable size="small">
      <div class="list-content">
        <!-- 标题 -->
        <n-space class="list-content-top go-px-0" justify="center">
          <n-space></n-space>
        </n-space>
        <!-- 顶部按钮 -->
        <n-space class="list-content-top">
          <mac-os-control-btn :narrow="true" :hidden="['close']" @remove="closeHandle"></mac-os-control-btn>
        </n-space>
        <!-- 中间 -->
        <n-form class="inner-box" :label-width="100" size="small" label-placement="left">
          <n-form-item path="username" label="登录账号">
            <n-input
              v-model:value="formData.username"
              type="text"
            >
            </n-input>
          </n-form-item>
          <n-form-item path="username" label="登录密码">
            <n-input
              v-model:value="formData.password"
              type="text"
            >
            </n-input>
          </n-form-item>
          <n-form-item path="username" label="公司名字">
            <n-input
              v-model:value="formData.companyName"
              type="text"
              maxlength="16"
            >
            </n-input>
          </n-form-item>
        </n-form>
      </div>
      <template #action>
        <n-space class="list-footer" justify="space-between">
          <n-space></n-space>
          <n-space>
            <n-text><n-button size="small" @click="closeHandle"> 取消 </n-button></n-text>
            <n-text><n-button size="small" @click="onSave"> 保存 </n-button></n-text>
          </n-space>
          <!-- end -->
        </n-space>
      </template>
    </n-card>
  </n-modal>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { MacOsControlBtn } from '@/components/Tips/MacOsControlBtn'
import { ResultEnum } from '@/enums/httpEnum'
import { saveCompanyApi } from '@/api/path'
import bus from '@/utils/bus'

const showRef = ref(false)
const emit = defineEmits(['close', 'refresh'])

const props = defineProps({
  modalShow: {
    required: true,
    type: Boolean
  },
  modalData: {
    required: true,
    type: Object
  }
})

const INIT = {
  username: '',
  password: '123456',
  companyName: '',
  userID: undefined
}

const formData = reactive({...INIT})

watch(
  () => props.modalShow,
  newValue => {
    showRef.value = newValue
    if (props.modalData?.userID) {
      Object.assign(formData, props.modalData)
    } else {
      Object.assign(formData, INIT)
    }
  },
  {
    immediate: true
  }
)

// 关闭对话框
const closeHandle = () => {
  emit('close')
}

function validate () {
  if (!formData.username) {
    window['$message'].error('请输入登录账号')
    return Promise.reject()
  }
  if (!formData.password) {
    window['$message'].error('请输入登录密码')
    return Promise.reject()
  }
  if (!formData.companyName) {
    window['$message'].error('请输入公司名字')
    return Promise.reject()
  }
  return Promise.resolve()
}

async function onSave() {
  await validate()
  try {
        // 新增项目
        const res = await saveCompanyApi(formData)
        if(res && res.code === ResultEnum.SUCCESS) {
          window['$message'].success(window['$t']('project.create_success'))
          closeHandle()
          bus.emit('refresh-list')
        }
      } catch (error) {
        window['$message'].error(window['$t']('project.create_failure'))
      }
}

</script>

<style lang="scss" scoped>
$padding: 30px;
$contentHeight: calc(80vh);
$imageHeight: calc(80vh - 110px);
$contentWidth: 500px;

.inner-box {
  padding-top: 30px;
  padding-right: 30px;
}

@include go('modal-box') {
  width: $contentWidth;
  height: $contentHeight;
  .list-content {
    margin-top: 20px;
    border-radius: $--border-radius-base;
    overflow: hidden;
    min-height: 100%;
    @include background-image('background-point');
    @extend .go-point-bg;
    &-top {
      position: absolute;
      top: 7px;
      left: 0px;
      padding-left: 10px;
      height: 22px;
      width: $contentWidth;
    }
    &-img {
      @extend .go-flex-center;
      padding: 6px 0;
      img {
        height: $imageHeight;
        min-height: 200px;
        max-width: 100%;
        @extend .go-border-radius;
      }
    }
  }
  .list-footer {
    line-height: 30px;
  }
}
</style>
